
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/finance/fiancelist">佣金发放</router-link></div>
          <div class="hei10"></div>

				<div class="powertop">
          <router-link class="powertopli " to="/finance/financenumber">返利号码</router-link>
          <router-link class="powertopli" to="/finance/financemoney">收入导入</router-link>
          <router-link class="powertopli powertopact" to="/finance/fiancelist">佣金发放生成表格</router-link>
          <router-link class="powertopli" to="/finance/fiancelist2">佣金核销选择客户</router-link>
				</div>

				<div class="con" v-loading="loading">
          <div style="margin-left: 20px; margin-bottom: 20px;">
              <el-button type="danger" @click="shengcheng">批量生成下载确认表</el-button>
              <el-button type="danger" @click="gofiancedown">确认表列表查看</el-button>
          </div>
					<div class="list">
            <div class="th" style="flex: 0.5;"><input type="checkbox" @change="quanxuan" value="0" v-model="quanxuana" /></div>
            <div class="th">发展人</div>
            <div class="th">客户经理</div>
            <div class="th">上次确认时间</div>
            <div class="th">待确认订单数量</div>
            <div class="th">待确认金额</div>

					</div>
					<div class="list" v-for="item in list" :key="item.id">
              <div class="td" style="flex: 0.5;"><input type="checkbox" :value="item.user_id" @change="danxuan" v-model="danxuans" /></div>
              <div class="td">{{item.shop_name}}</div>
              <div class="td">{{item.c_name}}</div>

              <div class="td">{{item.created_at}}</div>
              <div class="td">{{item.count}}</div>
              <div class="td">{{item.sum_amount}}</div>

					</div>

					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<!-- <foot></foot> -->

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'fiancelist',
		data(){
			return{
				loading:true,
				total:0,
				pagesize:20,
				page:1,
				list:"",
        danxuans: [],
        quanxuana: false,
        quanxuans: [],
        func_J02:false,
        func_J01:false,
        leader:""
			}
		},
		created() {
      var that = this

      //权限问题
      var user = JSON.parse(localStorage.getItem('USER'));
      this.user_func = user.functions
      for( var i in this.user_func){
          var func_number = this.user_func[i].code
          if(func_number.indexOf("J02") >= 0){ this.func_J02 = true }
          if(func_number.indexOf("J01") >= 0){ this.func_J01 = true }
          if(func_number.indexOf("J03") >= 0){ this.leader = 1 }
      }


			this.getlist();

		},
		methods:{

            //全选的ids集合
            ids: function() {
              var checkids = [];
              for (var i in this.list) {
                checkids.push(this.list[i].user_id);
              }
              this.quanxuans = checkids;
            },
            //点击全选
            quanxuan: function() {
              if (
                this.danxuans.length != this.quanxuans.length ||
                this.danxuans.length == 0
              ) {
                this.danxuans = this.quanxuans;
                this.quanxuana = true;
              } else {
                this.danxuans = [];
                this.quanxuana = false;
              }
              console.log(this.danxuans,this.quanxuans)
            },
            //点击单选
            danxuan: function() {
              // this.choosearea.push(this.checkedarea)
              if (this.danxuans.length == this.quanxuans.length) {
                this.quanxuana = true;
              } else {
                this.quanxuana = false;
              }
            },



            shengcheng:function(){
                if(this.func_J02 == false){
                  this.$message.error("您没有生成权限。");

                  return false
                }
                var that = this
                axios.post('/api/plan-market/expends/export',{merchant_ids:this.danxuans})
                    .then(response => {
                        if(response.data.msg.code == 0){
                            that.$message.success("生成数据已提交申请，请到确认列表中查看详情。");
                        }else{
                            if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                            that.$message.error(response.data.msg.info);
                        }
                    })
            },

            //翻页
            fanye:function(page){
              this.loading = true
              this.page = page
              this.getlist()
            },
            gofiancedown:function(){
              this.$router.push({
                path: '/finance/fiancedown',
              })
            },
            gomyDistributork:function(id){
              this.$router.push({
                path: '/finance/myDistributork',
                query: { id: id }
              })
            },

            //获取列表
            getlist:function(){
              this.danxuans = [];
              this.quanxuana = false
              var that = this;
              axios.get('/api/plan-market/expend/logs?status=-1&page=1&page_size=10000')
                .then(response => {
                  if(response.data.msg.code == 0){
                    that.list = response.data.data.data
                    that.total = response.data.data.total
                    that.ids()
                    that.loading = false
                  }else{
                    if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                    that.$message.error(response.data.msg.info);
                  }
                })
            },


		}

	}
</script>

<style lang="scss" scoped>
	.index{
    .listk{
      .el-radio{ margin:10px;}
    }

        .powertop{ display: flex; background:#f9f9f9; }
        .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
        .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
        .con{  background: #FFFFFF; min-height: 680px; padding: 20px 0;}

        .month{ text-align: right;  background: #FFFFFF; padding: 20px;}
				.title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272;}
				.add{ display: flex; justify-content: space-between; padding: 20px 30px; text-align: right; position: relative;
					.input-with-select{ width: 280px;}
					.el-button{  padding: 10px 20px;}
				}
        .el-input__icon{line-height: 36px;}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid;
						.el-button{
							a{ color: #409EFF;}
							&:hover{
								a{ color: #FFF;}
							}
						}

					}
          .th1{ flex-basis: 50px; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
          .td1{ flex-basis: 50px;  font-size: 14px; border-right:1px #EAEAEA solid;  }

				}
				.el-pagination{ text-align: right; margin: 20px 0}
				.my{
					display: flex; justify-content: space-between; padding: 20px; line-height: 20px;
					.myid{
						font-size: 17px; color: #DD2727; padding-left: 10px;
						span{ color: #B1B1B1; font-size: 14px; margin-left: 20px}
					}
					.invitation{
						font-size: 14px; color: #B1B1B1;
						span{ color: #197CFF; cursor: pointer;}
					}
				}


	}
</style>
